<script setup>
import empty from '@/assets/img/empty.png'
import pagination from '@/components/pagination.vue'
import emptyData from '@/components/emptyData.vue'
import { useStore } from 'vuex';
import { reactive, onMounted, onBeforeUnmount, computed, ref,inject } from 'vue';
const store = useStore()
const api = store.state.api
const isAnchor = store.state.isAnchor
const common = store.state.common.obj
const subString = inject('methods').subString
// 当前直播间主播信息
let user_panel = reactive({
    result: {
        "awardCount": 0,
        "awardLimit": 39999,
        "goodsCount": 0,
        "userId": 0,
        "userName": ""
    }
})
const getWelfareUser_panel = async () => {
    await api.welfareUser_panel({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        if (res.data.result) user_panel.result = res.data.result
    })
}

let timer
onMounted((pageAfter) => {
    getWelfareUser_panel()
    getRecord()
    timer = setInterval(() => {
        getRecord(pageAfter)
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
// 开奖记录
let lotteryRecord = reactive({
    result: {
        list: []
    }
})
let page = ref(0)
const getRecord = async (pageAfter) => {
    await api.welfareUser_award_history({ anchorId: isAnchor ? common.userId : common.anchorId, page: page.value }).then(res => {
        if (res.data.result) {
            lotteryRecord.result = res.data.result
            pageAfter && pageAfter()
        }
    })
}
const record = computed(() => {
    return lotteryRecord.result
})
const getList = (val, pageAfter) => {
    page.value = val
    getRecord(pageAfter)
}
</script>

<template>
    <div class="pool">
        <div class="part1">
            <div class="item">
                <img src="http://down.qxiu.com/pic/9576_9.png" alt="">
                <div class="infos">
                    <p>联赛票</p>
                    <p>100豆=1联赛值</p>
                    <p>联赛PK中计100票每累计送出39,999个联赛票即可获得1个齐齐嘉年华作为奖励</p>
                    <div class="btn">查看详情</div>
                </div>
            </div>
            <div class="item">
                <img src="http://down.qxiu.com/pic/8721_9.png" alt="">
                <div class="infos">
                    <p>齐齐嘉年华</p>
                    <p>300,000豆=9,000联赛值</p>
                    <p>联赛PK中享3倍PK票，计900,000票</p>
                    <div class="btn">查看详情</div>
                </div>
            </div>
        </div>
        <div class="part2">
            <div class="poolBottom">
                <div class="nowRoom">
                    <img class="headImg" :src="store.state.userInfo.headImgSmall|| empty" alt="">
                    <div class="infoBox">
                        <p class="name">昵称：{{ subString(user_panel.result.userName|| store.state.userInfo.nickShow||'酷炫牛人', 8 ,true) }}</p>
                        <p>ID： {{ user_panel.result.userId||common.userId }}</p>
                    </div>
                    <div class="item">
                        <div class="til">已送出联赛票</div>
                        <div class="val">{{ user_panel.result.goodsCount }} / {{ user_panel.result.awardLimit }} </div>
                    </div>
                    <div class="item">
                        <div class="til">已获奖励个数</div>
                        <div class="val">{{ user_panel.result.awardCount }}</div>
                    </div>
                </div>
                <div class="nowRoom awardRecord">
                    <div class="logWrap">
                        <p class="title">奖励记录<img src="../../assets/img/welfare/arrow.png" alt=""></p>
                        <ul class="awardList">
                            <li>
                                <p v-for="(item, index) in ['时间', '礼物奖励']" :key="index">{{ item }}</p>
                            </li>
                            <li v-if="record.list.length > 0" v-for="(item, index) in record.list" :key="index">
                                <p>{{ item.time }}</p>
                                <p>{{ item.goodsName }}*{{ item.goodsCount }}</p>
                            </li>
                            <emptyData v-else />
                        </ul>
                        <pagination v-if="record.totalPage > 0" :all="record.totalPage" @on-change="getList" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped></style>